import React, { useRef } from 'react';
import './index.css'; // Import CSS for styling

const HorizontalScroll = () => {
    // Sample image URLs (you can replace these with your own)
    const images = [
        'https://img1.baidu.com/it/u=1236161007,3990332174&fm=253&fmt=auto&app=138&f=JPEG?w=882&h=500',
        'https://img1.baidu.com/it/u=1514215528,1022680041&fm=253&fmt=auto&app=138&f=JPEG?w=1422&h=800',
        'https://img1.baidu.com/it/u=3748685500,3168578391&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500',
        'http://img2.baidu.com/it/u=3846579639,2421678060&fm=253&app=138&f=JPEG?w=1422&h=800',
        'http://img2.baidu.com/it/u=1773205390,809104170&fm=253&app=138&f=JPEG?w=1422&h=800',
        'http://img2.baidu.com/it/u=1630823696,3773375084&fm=253&app=138&f=JPEG?w=1422&h=800',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F27%2F20200627230751_xtUft.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1729165087&t=709c672b163dc467e81c8e943d63ab43',
        'https://img1.baidu.com/it/u=767464412,968011689&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500',
        
    ];

    const scrollRef = useRef(); // Reference to the scroll container

    const scroll = (direction: string) => {
        if (scrollRef.current) {
            const scrollAmount = 300; // Amount to scroll (equal to image width)
            scrollRef.current.scrollBy({
                left: direction === 'left' ? -scrollAmount : scrollAmount,
                behavior: 'smooth',
            });
        }
    };

    return (
        <div className="horizontal-gallery">
            <button className="arrow left" onClick={() => scroll('left')}>
                &larr; {/* Left arrow */}
            </button>
            <div className="image-scroll" ref={scrollRef}>
                {images.map((src, index) => (
                    <div key={index} className="image-container">
                        <img 
                            src={src} 
                            alt={`Image ${index + 1}`} 
                            className="image" 
                        />
                    </div>
                ))}
            </div>
            <button className="arrow right" onClick={() => scroll('right')}>
                &rarr; {/* Right arrow */}
            </button>
        </div>
    );
};

export default HorizontalScroll;